<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>es6类转es5的代码</title>
  <!-- 
  在JavaScript中，ES6引入了类（class）的概念，使得面向对象编程更加简洁和易读。然而，许多旧的环境仍然只支持ES5语法。因此，将ES6类转换为ES5代码是一个常见的需求。
  1. ES6类的基本语法
  在ES6中，类的定义通常如下所示：
  class Animal {
      constructor(name) {
          this.name = name;
      }

      speak() {
          console.log(`${this.name} makes a noise.`);
      }
  }

  const dog = new Animal('Dog');
  dog.speak(); // 输出: Dog makes a noise.
  2. ES5的实现方式

  为了将上述ES6类转换为ES5，我们可以使用构造函数和原型链的方式来实现：
  function Animal(name) {
      this.name = name;
  }

  Animal.prototype.speak = function() {
      console.log(this.name + ' makes a noise.');
  };

  var dog = new Animal('Dog');
  dog.speak(); // 输出: Dog makes a noise.
  3. 详细转换步骤

  1. 构造函数：将类的构造函数转换为一个普通的函数。
  2. 原型方法：将类中的方法添加到构造函数的 `prototype` 上。
  3. 实例化：使用 `new` 关键字创建实例。

  4. 继承的转换

  如果类之间存在继承关系，转换会稍微复杂一些。以下是一个ES6中的继承示例：
  class Dog extends Animal {
      speak() {
          console.log(`${this.name} barks.`);
      }
  }

  const dog = new Dog('Dog');
  dog.speak(); // 输出: Dog barks.
  转换为ES5的方式如下：
  function Animal(name) {
      this.name = name;
  }

  Animal.prototype.speak = function() {
      console.log(this.name + ' makes a noise.');
  };

  function Dog(name) {
      Animal.call(this, name); // 调用父类构造函数
  }

  // 继承父类的原型
  Dog.prototype = Object.create(Animal.prototype);
  Dog.prototype.constructor = Dog;

  // 在子类中定义方法
  Dog.prototype.speak = function() {
      console.log(this.name + ' barks.');
  };

  var dog = new Dog('Dog');
  dog.speak(); // 输出: Dog barks.

  5. 总结
  将ES6类转换为ES5主要涉及构造函数和原型链的使用。虽然过程可能相对繁琐，但理解这一过程有助于在不同的JavaScript环境中保持代码的兼容性。随着JavaScript生态系统的不断发展，许多工具（如Babel）可以自动完成这种转换，使开发者能够更专注于业务逻辑而不是语法兼容性。
   -->
</head>
<body>

  <script>
    "use strict";

    function _classCallCheck(instance, Constructor) {
      if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
      }
    }

    function _defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    function _createClass(Constructor, protoProps, staticProps) {
      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
      if (staticProps) _defineProperties(Constructor, staticProps);
      Object.defineProperty(Constructor, "prototype", { writable: false });
      return Constructor;
    }

    // 纯函数: 相同输入一定产生相同的输出, 并且不会产生副作用
    var Person = /*#__PURE__*/ (function () {
      debugger

      function Person(name, age) {
        _classCallCheck(this, Person);

        this.name = name;
        this.age = age;
      }

      _createClass(
        Person,
        [
          {
            key: "running",
            value: function running() {}
          },
          {
            key: "eating",
            value: function eating() {}
          }
        ],
        [
          {
            key: "randomPerson",
            value: function randomPerson() {}
          }
        ]
      );

      return Person;
    })();

    var p1 = new Person("class", 18)
    console.log(p1);
    
    
  </script>
  
</body>
</html>